<template>
  <div>
    <h3>UsePusherDemo</h3>
    <div>
      <p>ids: <input type="text" v-model="ids" placeholder="id1,id2..." /></p>
      <p>
        msg:<input type="text" v-model="msg" placeholder="please enter msg" />
      </p>
    </div>
    <div>
      <button @click="sendMsg">发送WS消息</button>
      <button @click="pushMsg">群发推送</button>
      <button @click="closeConn">关闭WS连接</button>
    </div>
    <p>remoteMsgs:{{ remoteMsgs }}</p>
  </div>
</template>

<script setup lang="ts">
import usePusher, { SocketType } from "@/hooks/usePusher";
import { ref } from "vue";

const ids = ref("");
const msg = ref("");
const remoteMsgs = ref<string[]>([]);

const {
  sendMsg: send,
  pushMsg: push,
  closeConn,
} = usePusher({
  type: SocketType.CLIENT_ONLY,
  wsRemote: "ws://localhost:8080",
  pushAPI: "http://localhost:3000/push",
  msgHandler: (data: string) => {
    console.log("handle msg", data);
    remoteMsgs.value.push(data);
  },
});

const sendMsg = () => {
  send.value!.call(null, msg.value);
  msg.value = "";
};

const pushMsg = () => {
  push(ids.value.split(","), msg.value);
  msg.value = "";
  ids.value = "";
};
</script>

<style scoped></style>
